<template>
  <div>
    <div class="message-box" v-if="isShowMsg">
      <span>操作提示：用户评论及知识提供需通过审核后才可发布</span>
      <t-icon
        class="hw-click-cursor"
        @click="isShowMsg = false"
        name="close"
        size="12"
        style="color: rgba(0, 0, 0, 0.6)"
      ></t-icon>
    </div>
    <div class="comment-parents">
      <div class="comment-parent-heard">
        <t-tabs v-model="cruuent" @change="changeTab">
          <t-tab-panel :value="item.value" :label="item.title" v-for="item in tabList2" :key="item.value">
          </t-tab-panel>
        </t-tabs>
      </div>
      <div class="comment-parent-mo">
        <t-row>
          <t-col :span="4" v-for="(item, index) in tabList1" :key="item.value">
            <div
              @click="clickTab(item.value)"
              class="col-item hw-flex-style-c-c hw-click-cursor"
              :class="{ 'col-item-solid': index == 1, 'col-active': parmas.CommentStatus == item.value }"
            >
              {{ item.title }}
            </div>
          </t-col>
        </t-row>
      </div>

      <div class="comment-parent">
        <div class="comment-box">
          <isNull title="暂无评论" v-if="list.length == 0" />
          <comment :info="item" v-for="item in list" :key="item.id" @replySuccess="replySuccess" />
        </div>

        <t-row style="border: none">
          <t-col :span="12">
            <t-pagination
              v-model="parmas.pageNo"
              v-model:pageSize="parmas.pageSize"
              :total="total"
              :border="false"
              show-sizer
              :show-page-size="false"
              @page-size-change="onPageSizeChange"
              @current-change="onCurrentChange"
            />
          </t-col>
        </t-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import isNull from '@/components/isnull/isNull.vue';
import { commentList } from '@/api/comment/comment';
import { reactive, ref } from 'vue';
import { tabList2, tabList1 } from '../../project/prijectMenu/components/adminComponents/data';
import comment from '@/components/comment/comment.vue';

const props = defineProps({
  showpieceId: {
    type: Number,
  },
});
const parmas = reactive({
  CommentStatus: -1, //
  showpieceId: 0, //展品主键
  projectId: 0, //项目主键
  value: '', //关键字
  pageNo: 1,
  pageSize: 10,
  isSelf: 0,
});
const isShowMsg = ref(true);
const cruuent = ref(1);
const cruuent1 = ref(1);
const clickTab = (e: number) => {
  parmas.CommentStatus = e;
  parmas.pageNo = 1;
  list.value = [];
  init();
};
const list = ref([]);
const total = ref(0);
const init = async () => {
  try {
    parmas.showpieceId = props.showpieceId;
    let { data } = await commentList(parmas);
    total.value = data.total;
    list.value = data.data;
    if (list.value.length < total.value) {
    } else {
    }
  } catch {}
};
const changeTab = () => {
  if (cruuent.value === 1) {
    parmas.showpieceId = 1;
  } else {
    parmas.showpieceId = 0;
  }
  parmas.pageNo = 1;
  list.value = [];
  init();
  // console.log(cruuent.value);
};
const onPageSizeChange = (size) => {
  init();
  // console.log('page-size:', size);
  // MessagePlugin.success(`pageSize变化为${size}`);
};

const replySuccess = () => {
  init();
};
const onCurrentChange = (index, pageInfo) => {
  // MessagePlugin.success(`转到第${index}页`);
  // console.log(pageInfo);
  init();
};
init();
</script>

<style lang="less" scoped>
.t-row {
  border: 1px solid #dcdcdc;
}
.t-col {
  margin-bottom: 0;
}
.col-item {
  // width: 100%;
  height: 32px;
}
.col-item-solid {
  background: #ffffff;
  border-radius: 2px;
  border-left: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
}
.col-active {
  width: 100%;
  height: 32px;
  background: #d2ad77;
  border-radius: 2px 0px 0px 2px;
  color: #ffffff;
}
.comment-parent {
  width: 100%;
  padding: 32px 72px;
  display: flex;
  flex-direction: column;
  .comment-box {
    height: 450px;
    padding-top: 20px;
    overflow: scroll;
  }
}
.comment-parent-mo {
  width: 100%;
  padding: 0px 72px;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.comment-parents {
  width: 100%;
  min-height: 640px;
  background: #fefefe;
  border-radius: 4px;
  border: 1px solid #d2ad77;
  margin-top: 20px;
}
.comment-parent-heard {
  padding: 0 24px;
  width: 100%;
  height: 65px;
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.message-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  width: 100%;
  padding: 16px 24px;
  background: #eaf0fb;
  border-radius: 4px;
  border: 1px solid #a2c5ff;
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    line-height: 22px;
  }
}
</style>
